(() => {
  let xxcdBoxDom = document.querySelector(".left");
  let tetcolDom = document.querySelector(".right_item .tetcol");
  xxcdBoxDom.addEventListener("click", (e) => {
    Array.from(xxcdBoxDom.children).forEach((item, index) => {
      if (e.target.innerHTML == item.innerHTML) {
        item.classList.add("xxcdsct");
        tetcolDom.innerHTML = item.innerHTML;
      } else {
        item.classList.remove("xxcdsct");
      }
    });
  });
})();
const dataContainer = document.getElementById("data-container");
const paginationContainer = document.querySelector(".pagination");
const itemsPerPage = 12; // 每页显示的项目数

let currentPage = 1;
const allData = [
  `./image/tdly.jpg`,
  `./image/tdly1.jpg`,
  `./image/tdly2.jpg`,
  `./image/tdly3.jpg`,
  `./image/tdly4.jpg`,
  `./image/tdly5.jpg`,
  `./image/tdly6.jpg`,
  `./image/tdly7.jpg`,
  `./image/tdly8.jpg`,
  `./image/tdly9.jpg`,
  `./image/tdly10.jpg`,
  `./image/tdly11.jpg`,
  `./image/tdly12.jpg`,
  `./image/tdly13.jpg`,
  `./image/tdly (1).jpg`,
  `./image/tdly (2).jpg`,
  `./image/tdly (3).jpg`,
  `./image/tdly (4).jpg`,
  `./image/tdly (5).jpg`,
  `./image/tdly (6).jpg`,
  `./image/tdly (7).jpg`,
  `./image/tdly (8).jpg`,
  `./image/tdly (9).jpg`,
  `./image/tdly (10).jpg`,
  `./image/tdly (11).jpg`,
];

function displayData(page) {
  dataContainer.innerHTML = "";
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const pageData = allData.slice(startIndex, endIndex);

  pageData.forEach((item) => {
    const img = document.createElement("img");
    img.className = "col-xl-3 col-lg-3 col-sm-6 col-6";
    img.src = item;
    dataContainer.appendChild(img);
  });

  updatePagination();
}

function updatePagination() {
  paginationContainer.innerHTML = "";
  const totalPages = Math.ceil(allData.length / itemsPerPage);
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement("button");
    button.textContent = i;
    button.dataset.page = i;

    if (i === currentPage) {
      button.classList.add("disabled");
      button.disabled = true;
    } else {
      button.addEventListener("click", () => {
        currentPage = i;
        displayData(currentPage);
      });
    }
    paginationContainer.appendChild(button);
  }
}
const syydom = document.querySelector(".syyfn");
syydom.addEventListener("click", () => syyfn());
const xyydom = document.querySelector(".xyyfn");
xyydom.addEventListener("click", () => xyyfn());
function syyfn() {
  if (currentPage > 1) {
    currentPage--;
    displayData(currentPage);
  }
}
function xyyfn() {
  const totalPages = Math.ceil(allData.length / itemsPerPage);
  if (currentPage < totalPages) {
    currentPage++;
    displayData(currentPage);
  }
}
// 初始化显示第一页数据
displayData(currentPage);
